<template>
	<div>
		<h1 style="color: red">{{ data }}</h1>
		<h2 style="color: green">{{ msg }}</h2>
		<button @click="resetData">修改数据</button>
	</div>
</template>

<script>
export default {
	// props 获取父组件传过来的属性
	// props里的数据和data里的一样，
	// 都是挂载到this上的
	props: ['data'],
	data() {
		return {
			msg: '我是自己的数据',
		}
	},
	methods: {
		resetData() {
			// data 和 props 哪个是可以修改的
			this.msg = '我是msg'
			// 不可以在子组件中修改父组件传递的数据
			// this.data = '修改父级的数据'
			this.$emit('getdata', '修改父级的数据')
		},
	},
}
</script>